<!DOCTYPE html>
<html>
  <head>
    <title>Leaflet.RouteAnimate</title>
    <meta charset="utf-8" />
    <!-- 引入leafletapi -->
    <link rel="stylesheet" href="./leaflet.css" />
    <script src="./leaflet.js"></script>

    <!-- 引入插件 -->
    <script src="./plugins/leaflet.polylineDecorator.js"></script>
    <script src="./plugins/Leaflet.AnimatedMarker.js"></script>

    <style>
      body {
        margin: 0;
      }

      .map {
        position: absolute;
        height: 100%;
        right: 0;
        left: 0;
      }

      .menuBar {
        position: relative;
        text-align: center;
        top: 10px;
        margin: 0 50px;
        padding: 5px;
        border-radius: 3px;
        z-index: 999;
        color: #ffffff;
        background-color: rgba(0, 168, 0, 1);
      }
    </style>
  </head>

  <body>
    <div class="map" id="map"></div>
    <div class="menuBar">
      <input type="button" value="开始" onclick="startClick()" />
      <input type="button" value="暂停" onclick="pauseClick()" />
      <input type="button" value="加速" onclick="speetUp()" />
      <input type="button" value="减速" onclick="speetDown()" />
      <input type="button" value="停止" onclick="stopClick()" />
    </div>
  </body>

  <script>
    // 初始化地图
    var map = L.map("map", {
      center: [39.924317, 116.390619],
      zoom: 14,
      preferCanvas: true // 使用canvas模式渲染矢量图形
    });
    // 添加底图
    var tiles = L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png").addTo(
      map
    );

    var latlngs = [
      [39.898457, 116.391844],
      [39.898595, 116.377947],
      [39.898341, 116.368001],
      [39.898063, 116.357144],
      [39.899095, 116.351934],
      [39.905871, 116.35067],
      [39.922329, 116.3498],
      [39.931017, 116.349671],
      [39.939104, 116.349225],
      [39.942233, 116.34991],
      [39.947263, 116.366892],
      [39.947568, 116.387537],
      [39.947764, 116.401988],
      [39.947929, 116.410824],
      [39.947558, 116.42674],
      [39.9397, 116.427338],
      [39.932404, 116.427919],
      [39.923109, 116.428377],
      [39.907094, 116.429583],
      [39.906858, 116.41404],
      [39.906622, 116.405321],
      [39.906324, 116.394954],
      [39.906308, 116.391264],
      [39.916611, 116.390748]
    ];
    var speedList = [
      1,
      1,
      2,
      2,
      3,
      3,
      3,
      4,
      4,
      4,
      4,
      4,
      4,
      5,
      5,
      4,
      4,
      4,
      3,
      2,
      2,
      1,
      1,
      1
    ];
    // 轨迹线
    var routeLine = L.polyline(latlngs, {
      weight: 8
    }).addTo(map);
    // 实时轨迹线
    var realRouteLine = L.polyline([], {
      weight: 8,
      color: "#FF9900"
    }).addTo(map);
    // 轨迹方向箭头
    var decorator = L.polylineDecorator(routeLine, {
      patterns: [
        {
          repeat: 50,
          symbol: L.Symbol.arrowHead({
            pixelSize: 5,
            headAngle: 75,
            polygon: false,
            pathOptions: {
              stroke: true,
              weight: 2,
              color: "#FFFFFF"
            }
          })
        }
      ]
    }).addTo(map);

    var carIcon = L.icon({
      iconSize: [37, 26],
      iconAnchor: [19, 13],
      iconUrl: "./icons/car.png"
    });
    // 动态marker
    var animatedMarker = L.animatedMarker(routeLine.getLatLngs(), {
      speedList: speedList,
      interval: 200, // 默认为100mm
      icon: carIcon,
      playCall: updateRealLine
    }).addTo(map);
    var newLatlngs = [routeLine.getLatLngs()[0]];

    // 绘制已行走轨迹线（橙色那条）
    function updateRealLine(latlng) {
      newLatlngs.push(latlng);
      realRouteLine.setLatLngs(newLatlngs);
    }

    let speetX = 1; // 默认速度倍数
    // 加速
    function speetUp() {
      speetX = speetX * 2;
      animatedMarker.setSpeetX(speetX);
    }

    // 减速
    function speetDown() {
      speetX = speetX / 2;
      animatedMarker.setSpeetX(speetX);
    }

    // 开始
    function startClick() {
      animatedMarker.start();
    }

    // 暂停
    function pauseClick() {
      animatedMarker.pause();
    }

    // 停止
    function stopClick() {
      newLatlngs = [];
      animatedMarker.stop();
    }
  </script>
</html>
